<template>
  <view class="top-container">
    <view class="status-contents"
          :style="{ paddingTop: topBar.statusBarHeight + 'px', height: topBar.navbarHeight + 'px' }">
      <image src="../../static/black_back.png" v-if="topBar.style === 'custom'" mode="widthFix" class="back"
             @click="onBack()"></image>
      <view class="center" @click="changeStatusClick(!running)">
        <image src="../../static/zanting@2x.png" v-if="running" mode="widthFix" class="icon"></image>
        <image src="../../static/bofang@2x.png" v-else mode="widthFix" class="icon"></image>
        <text class="title">倒计时{{ timeFormat(this.max - this.time) }}</text>
      </view>
      <view class="btn">
        <image src="../../static/shezhi@2x.png" class="setting" @click="$emit('settingClick')"></image>
      </view>
    </view>
  </view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex';
import questionCache from "@/libs/questionCache";

export default {
  name: 'exam_navbar',
  props: ['kemu', 'storeId'],
  data() {
    return {
      time: 0,
      // max: 5,
      // max: 45 * 60,
      running: false
    };
  },
  computed: {
    ...mapGetters(['topBar', 'settings']),
    //
    max() {
      console.log('settings', this.settings)
      if (!this.settings) {
        return 0
      }
      if (this.kemu === '1')
        return parseInt(this.settings.kemu1TimeMax)
      return parseInt(this.settings.kemu4TimeMax)
    }
  },
  destroyed() {
    console.log('destroyed')
    clearInterval(this._timeDown)
  },
  methods: {
    onBack() {
      uni.navigateBack()
    },
    getTime() {
      return this.timeFormat(this.max - this.time)
    },
    timeFormat(time) {
      let minutes = Math.floor((time) / 60) + ''
      if (minutes.length < 2) {
        minutes = '0' + minutes
      }
      let seconds = (time) % 60 + ''
      if (seconds.length < 2) {
        seconds = '0' + seconds
      }
      return minutes + ':' + seconds
    },
    changeStatusClick(running) {
      this.restart(running)
      if (!running) {
        this.$emit('pause', this.max - this.time, 'pause')
      }
    },
    isPaused() {
      return !this.running
    },
    resume() {
      this.restart(true)
    },
    pause() {
      this.restart(false)
      return this.max - this.time
    },
    isFinished() {
      return this.time >= this.max
    },
    restart(running) {
      console.log('restart ...')
      if (this.isFinished()) {
        console.log('已结束')
        return;
      }

      if (this.running === running) {
        console.log('正在执行')
        return
      }

      this.running = running

      if (this.running) {
        console.log('开始考试')
        this._timeDown = setInterval(() => {
          if (this.isFinished()) {
            questionCache.getStore(this.storeId).publish('submitExam')
            console.log('结束考试')
            clearInterval(this._timeDown)
            return
          }

          this.time += 1

          // console.log(this.time)
        }, 1000)
      } else {
        console.log('暂停考试')
        clearInterval(this._timeDown)
      }
    }
  }
}
;
</script>

<style lang="scss">
.top-container {
  z-index: 1;
  color: #000;
  background-color: #fff;

  .btn {
    height: 108upx;
    padding: 0 20upx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 10rpx;
    color: #999;
    .setting {
      width: 40rpx;
      height: 48rpx;
    }
    &.can {
      color: #1f1f1f;
    }
  }
  .status-contents {
    padding-left: 20upx;
    padding-right: 38upx;
    align-items: center;
    display: flex;

    .center {
      margin: 0 auto;

      .icon {
        width: 28upx;
        height: 28upx;
        margin-right: 10upx;
      }

      .title {
        font-size: 32upx;
        font-weight: bold;
      }
    }

    .back {
      width: 36upx;
      height: 36upx;
      position: absolute;
    }
  }
}
</style>
